<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>天气案例_监视属性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <!-- 
        监视属性watch:
            1:当被监视的属性变化时，handler回调函数自动调用，进行相关操作
            2:监视的属性必须存在，才能进行监视！！！
            3：监视的两种写法
                1：new Vue()时传入watch配置
                2：通过vm.$watch监视
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}, {{x}}</h2>

        <button @click="changeWheter">切换天气</button>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 vue在启动时生成生产提示    
        // 创建vue实例
        const vm = new Vue({
            el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: { //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                firstName: '徐',
                lastName: '亚远',
                isHot: true,
                x: 1
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWheter() {
                    this.x++
                    this.isHot = !this.isHot
                }
            },

            // 监视属性的第一种写法  new Vue()时传入watch配置
            watch: {
                isHot: {      // info也可以被监视
                    immediate: true, //初始化时让handler调用一下

                    // handler什么时候调用？当isHot发生改变时
                    handler(newValue, oldValue) {
                        console.log('isHot被修改了', newValue, oldValue)
                    }
                }
            }

        })

        // 监视属性的第二种写法  通过vm.$watch监视
        // vm.$watch('isHot', {
        //     handler(newValue, oldValue) {
        //         console.log('isHot被修改了', newValue, oldValue)
        //     }
        // })


    </script>


</body>

</html>